/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
  CCell, Table, TableBody, TableRow, Text, TableHead, BlobInputList, Button, Cell, InputLine,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, RepLink, useItemInputControl} from "../../common/base";
import {useOmnipotentPrefCs, useOmnipotentPrefTitle} from "../../hook/useOmnipotentPref";
import {FootMenRow, } from "../../contain/rarelyVary";
import {useMeasureInpFilter} from "../../common/hooks";
import {objNestSet,} from "../../../common/tool";
import {MemoDateInput} from "../../../comp/base";
import {useContext} from "react";
import UserContext from "../../../routing/UserContext";

interface Props extends InternalItemProps {
  part?: number;
}

const item检验项 = [
  ['出厂资', [{t:'出厂资料', s: 2,cs:1}], '压力容器出厂资料', ],
  ['附件资料', [{},], '安全附件的出厂资料', ],
  ['安许可', [{t:'安装资格证件', s: 3}, ], '安装许可证',],
  ['告知手续', [{}], '告知书或移装手续',],
  ['人员证', [{}], '持证人员证件', ],
  ['施工方案', [], '施工组织方案', ],
  ['基础检', [{t:'容器本体安装情况', s: 9},], '基础检查', ],
  ['基沉降', [{}], '大型压力容器基础沉降', ],
  ['外观尺', [{}], '容器外观、安装几何尺寸', ],
  ['支座栓', [{}], '支撑、支座、紧固螺栓', ],
  ['铭牌漆', [{}], '设备铭牌、漆色、标志', ],
  ['保温隔', [{}], '保温层、隔热层、衬里', ],
  ['遮阳罩', [{}], '遮阳罩、操作台', ],
  ['排污装', [{}], '疏水、排放、排污装置', ],
  ['接地装', [{}], '罐体接地装置', ],
  ['耐压试', [], '耐压试验', ],
  ['泄漏试', [], '泄漏试验', ],
  ['安全阀', [{t:'安全附件', s: 5},], '安全阀', ],
  ['爆破片', [{}], '爆破片装置', ],
  ['易熔塞', [{}], '易熔塞', ],
  ['急切断装', [{}], '紧急切断装置', ],
  ['联锁装', [{}], '安全联锁装置', ],
  ['压力表', [{t:'测量仪表', s: 3},], '压力表', ],
  ['温度表', [{}], '温度表', ],
  ['液位计', [{}], '液位计', ],
];
const 记事选=['1、该台压力容器在投入使用前或者投入使用后30日内，使用单位应向负责特种设备安全监督管理部门办理使用登记。', ];
export const 查结果选=['符合', '不符合', '无此项'];
const 工作见证选=['安装记录','现场检查','施工组织方案','现场核对','合格证、校验报告','检定报告','出厂资料','告知书'];
export const itemA检验项: string[] = ['质体系运', '记事'];
item检验项.forEach(([name, title, initIsp], i: number) => {
    itemA检验项.push(name as string);
});
const item检验项1=item检验项.slice(0,15);
const item检验项2=item检验项.slice(15,item检验项.length);
export const InspectionItem =
    React.forwardRef((
        {children, show, alone = true, refWidth, label, part}: Props, ref
    ) => {
      const {user} = useContext(UserContext);
      const {inp, setInp} = useItemInputControl({ref});
      const [getInpFilter] = useMeasureInpFilter(null, itemA检验项,);
      const baseSeq= part===1? 0: item检验项1.length;
      const config = part===1? item检验项1: item检验项2;
      const titNode=useOmnipotentPrefTitle({config, baseSeq});
      return (
          <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                               alone={alone} label={label!}>
            <Text variant="h5">{label}：</Text>
            {config.map(([name, _1, _2, unit]: any, i: number) => {
              return (<React.Fragment key={i}>
                <div css={{display: 'flex', flexWrap: 'wrap', alignItems: 'center'}}>
                  {titNode[i]}&nbsp;
                  <div css={{display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap'}}>
                    检查结果：
                    <BlobInputList value={inp?.[name]?.r || ''} datalist={查结果选} rows={1}
                                   style={{
                                     display: 'inline-flex', width: '8rem', maxWidth: '100%',
                                   }}
                                   onListChange={v => objNestSet(name, 'r', v || undefined, inp, setInp)}/>
                  </div>
                  <div css={{display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap'}}>
                    工作见证：
                    <BlobInputList value={inp?.[name]?.z || ''} datalist={工作见证选} rows={1}
                                   style={{
                                     display: 'inline-flex', width: '16rem', maxWidth: '100%',
                                   }}
                                   onListChange={v => objNestSet(name, 'z', v || undefined, inp, setInp)}/>
                  </div>
                  <div css={{display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap'}}>
                    确认日期
                    <MemoDateInput value={inp?.[name]?.d || ''}
                                   onChange={v => objNestSet(name,'d', v||undefined,inp,setInp) } />
                  </div>
                  签字人：{inp?.[name]?.sgm?.name || ''}。<br/>
                  {inp?.[name]?.sgm?.username === user?.username ?
                      <Button intent="warning"
                              onPress={async () => {
                                    // await tableSetInp('单图表', dxtix, inp, setInp, 'sgm', undefined);
                                await objNestSet(name,'sgm', undefined, inp,setInp);
                              }}
                      >去除签名</Button>
                      :
                      <Button intent="warning"
                              onPress={async () => {
                                const me = {username: user?.username, name: user?.person?.name};
                                    // await tableSetInp('单图表', dxtix, inp, setInp, 'sgm', me);
                                await objNestSet(name,'sgm', me, inp,setInp);
                              }}
                      >签名</Button>
                  }
                </div>
              </React.Fragment>);
            })}
            { 2===part &&
              <InputLine label='项目26，安装单位质量管理体系运转情况：'>
                <BlobInputList value={inp?.质体系运 || ''} rows={2} datalist={['运转正常']}
                               onListChange={v => setInp({...inp, 质体系运: v || undefined}) } />
              </InputLine>
            }
            <hr/>
            记事:
            <BlobInputList value={inp?.记事 || ''} rows={6} datalist={记事选}
                           onListChange={v => setInp({...inp, 记事: v || undefined}) } />
            <Text>
              注：结果栏中符合要求打“√”，基本符合要求打“○”，不符合要求打“×”，没有的项目打“—”，已整改打“△”。
            </Text>
            {children}
          </InspectRecordLayout>
      );
  });

const tailRender = (orc: any, name: string, lix: number, unit: any) => {
  return <>
    <CCell>{orc?.[name]?.r ?? '／'}</CCell>
    <CCell>{orc?.[name]?.z ?? '／'}</CCell>
    <CCell>{orc?.[name]?.sgm?.name ?? '／'}</CCell>
    <CCell>{orc?.[name]?.d ?? '／'}</CCell>
  </>;
}
/**【打印跨页拆分考量】 若有表头+表尾的预留 》=5.4rem；
 * 有表头尾行其一的的预留 》=4.5rem;
 * 表头表尾都没有配置的 》=3.5rem.
 * */
export const InspectionItemVw = ({orc, rep}: { orc: any, rep: any }
) => {
  const [renderP1,renderP2] = useOmnipotentPrefCs({orc, config: item检验项,
              split:[14], tag:'XmbIspItms', tailRender, pcols: 1, noNo: false, unitCel: false});
  return <>
    <div css={{"@media print": {paddingBottom: '5.4rem', pageBreakInside: 'avoid'}}}>
      <Text id='InspectionItem' variant="h2" css={{textAlign: 'center', marginTop: '1rem',
      }}>整装压力容器安装委托检验项目表</Text>
      <div css={{display: 'flex', justifyContent: 'space-between'}}>
        <Text></Text>
        <Text>报告编号：{rep.isp.no}</Text>
      </div>
    </div>
    <Table fixed={ ["3.6%", "7%", "%", "12%", "29%","11%","12%"] }
              css={{borderCollapse: 'collapse', "@media print": {marginTop: '-5.4rem'}}} tight miniw={800}>
      <TableHead>
        <TableRow>
          <CCell><Text css={{fontSize: '0.75rem'}}>序号</Text></CCell><CCell colSpan={2}>检验项目</CCell>
          <CCell>检查结果</CCell><CCell>工作见证</CCell><CCell>检验员</CCell><CCell>确认日期</CCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <RepLink rep={rep} tag={'InspectionItem'}>
          {renderP1}
        </RepLink>
        <RepLink rep={rep} tag={'XmbIspItms_16'}>
          {renderP2}
          <TableRow>
            <CCell>26</CCell><CCell colSpan={2}>安装单位质量管理体系运转情况</CCell>
            <CCell colSpan={4}>{orc?.质体系运 || '／'}</CCell>
          </TableRow>
          <TableRow>
            <Cell colSpan={7}>
              <div css={{minHeight: '2rem', whiteSpace: 'pre-wrap'}}>
                记事：<br/>{orc?.记事 || '／'}
              </div>
            </Cell>
          </TableRow>
        </RepLink>
      </TableBody>
      <FootMenRow span={7} orc={orc} rep={rep} href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/Conclusion#Conclusion`}/>
    </Table>
  </>;
};
